<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<title>北京市人民政府外事办公室领事保护教育服务平台</title>
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href='<c:url value="/share/bootstrap.css"></c:url>'>
	<link rel="stylesheet" href='<c:url value="/share/AllStyle.css"></c:url>'>
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src='<c:url value="/js/jquery.min.js"></c:url>'></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src='<c:url value="/js/bootstrap.min.js"></c:url>'></script>
	<script src='<c:url value="/js/all.js"></c:url>'></script>
	<style type="text/css">
		#touxiang_true{
			float: left;
			width: 36px;
			height: 36px;
			border-radius: 100%;
			display: block;
		    line-height: 60px;
		    color: #787d82;
		    text-align: center;
		    -webkit-transition: background-color 0.2s;
		    -moz-transition: background-color 0.2s;
		    transition: background-color 0.2s;
		}
		.vertical {
		    margin: 0 8px;
		    background: #dae1e6;
		    display: inline-block;
		    width: 1px;
		    height: 24px;
		    vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="home_header">
		<div class="Interface_center row">
		  <div class="col-xs-6">
			<div class="home_header_left">
					<span><img src='<c:url value="/share/images/book.png"></c:url>'>外事办公室领事保护处教育平台</span>
				</div>
		  </div>
		  <div class="col-xs-6">
				<div class="home_header_right">
				</div>
		  </div>
		  </div>
	</div>
	<div class="home_header_1">
		<div class="Interface_center">
			<ul class="home_header-nav menu-nav clearfix">
			  <li>
	            <a class="features-event track-event home_header_1_ClickA" href="home.html">课程</a>
	          </li>
	          <li>
	            <a class="features-event track-event" href="case.html">案例</a>
	          </li>
	          <li>
	            <a class="plan-event track-event" href="Examination.html">考试</a>
	          </li>
	          <li>
	            <a class="templates-event track-event" href="Foreign_security.html">涉外安全资料</a>
	          </li>
	          <li>
	            <a class="templates-event track-event" href="Consultation.html">咨询答疑</a>
	          </li>
	        </ul>
		</div>
	</div>
	<div class="home_header_2">
		<div class="Interface_center Interface_relative">
			<ul>
				<li>
					<div>课程类型：</div>
					<ul class="Interface_relative">
						<li><a href="javascript:;" class="home_header_2_Click">全部</a></li>
						<li><a href="javascript:;">留学</a></li>
						<li><a href="javascript:;">务工</a></li>
						<li><a href="javascript:;">旅行</a></li>
						<li><a href="javascript:;">商贸</a></li>
						<li><a href="javascript:;">反恐</a></li>
						<li><a href="javascript:;">疫情</a></li>
						<li><a href="javascript:;">法律纠纷</a></li>
						<li><a href="javascript:;">刑事案件</a></li>
					</ul>
				</li>
				<li>
					<div>排序：</div>
					<ul class="Interface_relative">
						<li><a href="javascript:;" class="home_header_2_Click">最新</a></li>
						<li><a href="javascript:;">最热</a></li>
					</ul>
				</li>
				<li>
					<div>课程形式：</div>
					<ul class="Interface_relative">
						<li><a href="javascript:;" class="home_header_2_Click">全部</a></li>
						<li><a href="javascript:;">视频课程</a></li>
						<li><a href="javascript:;">图文课程</a></li>
					</ul>
				</li>
			</ul>
			<div class="home_header_2_Arrow">
				<img src='<c:url value="/share/images/Arrow.png"></c:url>'>
			</div>
		</div>
	</div>

	<div class="home_content Interface_center">
		<ul class="Interface_relative row">
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_video">视频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_images">图文</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_audio">音频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_video">视频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_images">图文</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_audio">音频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_video">视频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_images">图文</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_audio">音频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_video">视频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_images">图文</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="Interface_relative_row_xs-3">
					<div class="home_content_float_audio">音频</div>
					<img src='<c:url value="/share/images/anli.png"></c:url>'>
					<div class="home_content_1">
						<div class="home_content_1_title">雅思魔方核心精讲</div>
						<div class="home_content_1_content">
							<p>主讲人：张敏</p>
							<p>课程类型：留学</p>
							<p>发布时间：2016.06.06</p>
						</div>
						<div class="home_content_empty_circular">
							<p>已学 100%</p>
						</div>
					</div>
				</div>
			</li>
		</ul>
		<nav>
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li><a href="#">1</a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
	</div>

	<script type="text/javascript">
		$(function(){
			$(".home_header-nav li").click(function(){
				$(".home_header-nav li a").removeClass("home_header_1_ClickA");
				$(this).children().addClass("home_header_1_ClickA");
			});
			$(".home_header_2 .Interface_center>ul>li:eq(0) ul li").click(function(){
				$(".home_header_2 .Interface_center>ul>li:eq(0) ul li a").removeClass("home_header_2_Click");
				$(this).children().addClass("home_header_2_Click");
			});
			$(".home_header_2 .Interface_center>ul>li:eq(1) ul li").click(function(){
				$(".home_header_2 .Interface_center>ul>li:eq(1) ul li a").removeClass("home_header_2_Click");
				$(this).children().addClass("home_header_2_Click");
			});
			$(".home_header_2 .Interface_center>ul>li:eq(2) ul li").click(function(){
				$(".home_header_2 .Interface_center>ul>li:eq(2) ul li a").removeClass("home_header_2_Click");
				$(this).children().addClass("home_header_2_Click");
			});
			$(".home_header_2_Arrow").click(function(){
				if(!$(this).is(".home_header_2_Arrow_true")){
					$(this).prevAll().hide();
					$(this).children().addClass("transform_rotate");
					$(this).addClass("home_header_2_Arrow_true");
				}else{
					$(this).prevAll().show();
					$(this).children().removeClass("transform_rotate");
					$(this).removeClass("home_header_2_Arrow_true");
				}
			});
			$(".home_content .row li").click(function(){
				window.location.href = "home_video_images_audio.html";
			});
			var login = localStorage.getItem("login");
			if(login == "true"){
				$(".home_header_right").html('<img src="images/black1.png" id="touxiang_lingdang" style="width: 24px;height: 24px;margin-top: 15px;cursor: pointer;"><span class="vertical" style="margin: 0 12px;margin-top: 18px;"></span>'+
					'<div class="home_login_true_2" style="float: right;margin-top: 10px;">'+
					'<img src="http://img.mukewang.com/user/555ce92d00018bd001000100-40-40.jpg" id="touxiang_true">'+
					'<div class="home_login_true_2" style="float: right;">'+
						'<div class="dropdown">'+
						  '<a class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="background: #295c96;color: #fff;border: none;font-size: 18px;margin-top: 3px;">'+
						    '个人中心'+
						    '<span class="caret" style="margin-left: 10px;"></span>'+
						  '</a>'+
						  '<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">'+
						    '<li><a href="#" id="login_remove">退出</a></li>'+
						  '</ul>'+
						'</div>'+
					'</div>');
			}else{
				$(".home_header_right").html('<a href="login.html">登录</a><a href="reg.html">注册</a>');
			}
			$("#login_remove").click(function(){
				localStorage.setItem("login","false");
				location.reload();
			});
		});
	</script>
</body>
</html>